<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
	  <image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <!-- #ifndef MP-WEIXIN -->
      
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text></text>
      <!-- #endif -->
      <!-- <p class="p2" @click="bianji">{{ text }}</p> -->
    </view>
    <view class="title">
      选择商家
    </view>
    <view class="shopInfo" v-if="type == 2">
      <view class="image_box">
        <image mode="aspectFit" :src="shopData.storeCoverImage" />
      </view>
      <view class="li_3">
        <view class="title">{{shopData.storeName}}</view>
        <view class="content">
          {{shopData.officeAddress}}
        </view>
        <view class="arrow" style="text-align:right">
          <view>
            <u-icon name="arrow-down" size="16" color="#000" @click="back">
				    </u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="shopInfo" v-if="type == 1">
      <view class="image_box">
        <image mode="aspectFit" :src="shopData.image" />
      </view>
      <view class="li_3">
        <view class="title">{{shopData.shopName}}</view>
        <view class="content">
          {{shopData.shopAddress}}
        </view>
        <view class="arrow" style="text-align:right">
          <view>
            <u-icon name="arrow-down" size="16" color="#000" @click="back">
				    </u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="title">
      留言
    </view>
    <view class="text">
      <textarea
        v-model="content"
        placeholder="请输入留言"
        placeholder-class="textarea-placeholder"
        maxlength="100"
        auto-height
      />
      <view class="length">
        ({{content.length}} / 100)
      </view>
    </view>
    <view class="btn flex_center" @click="submit" :class="content.length == 0?'none' : ''">邀请加入</view>
  </view>
</template>

<script>
import {
  mapGetters
} from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif
export default {
  data() {
    return {
      statusBarHeight,
      type: "1",
      shopData: {},
      content: '',
      userInfo: uni.getStorageSync("Pduser"),
    }
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    this.shopData = uni.getStorageSync('shopData')
    uni.removeStorageSync('shopData')
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  methods: {
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    fanhui() {
      uni.navigateBack({
        delta: 2,
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    submit() {
      if (this.content.length == 0) return
      let that = this
      that.$myRequest
        .post("/api/mobile/public/addChainStores", {
          aShopId: that.userInfo.shopId,
          shopId: this.shopData.id,
          bussType: this.type,
          remarks: this.content
        })
        .then(res => {
          uni.showToast({
            title: "邀请成功",
            icon: "none",
            mask: true
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 2,
            });
          }, 1500);
        });
    },
  },
}
</script>

<style lang="scss" scoped>
   .title {
    line-height: 50rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #3d3d3d;
    // margin-bottom: 20rpx;
    padding-left: 30rpx;
   }
  .box {
    min-height: 100vh;
    background: #fff;
  }
  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 34rpx;
    color: #fff;
    background-color: #64b6a8;
    margin-bottom: 40rpx;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }
    .p2 {
      position: absolute;
      bottom: 20rpx !important;
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: absolute;
      margin-left: auto;
      margin-right: 180rpx;
      bottom: 24rpx !important;
      /* #endif */
    }
    p {
      position: absolute;
      // top: 104rpx;
      line-height: 45rpx;
      // bottom: 21rpx;
      right: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }

  .shopInfo {
    margin-bottom: 20rpx;
    padding: 30rpx;
    display: flex;
    // justify-content: space-between;

    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }
    .image_box{
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
      position: relative;
    }

    .li_3 {
      padding-left: 20rpx;
      width: calc(100% - 300rpx);
      .title {
        padding-left: 0rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #333333;
      }

      .content {
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        margin-top: 28rpx;
      }

      .distance {
        font-size: 20rpx;
        font-weight: 500;
        color: #333333;
        text-align: right;
      }
      .servicesAvailable{
        font-size: 32rpx;
        font-weight: 500;
        color: #64B6A8;
        margin-bottom: 20rpx;
      }
      .serviceContent{
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      .arrow{
        align-items: flex-end;
        display: flex;
        justify-content: flex-end;
      }
    }
    .distance {
      padding-top: 60rpx;
      width: 100rpx;
      image {
        width: 40rpx;
        margin-bottom: 10rpx;
        height: 40rpx;
        border-radius: 0rpx;
        background: transparent;
      }
      text-align: center;
      color: #222;
      font-size: 20rpx;
    }
  }
  .text{
    margin: 30rpx 30rpx 100rpx;
    border: 2rpx solid #b4b4b4;
    position: relative;
    padding: 30rpx;
    textarea {
      font-size: 30rpx;
      line-height: 42rpx;
      width: 100%;
      min-height: 200rpx;
    }
    .length {
      text-align: right;
      color: #999;
    }
  }
  .btn{
    width: 300rpx;
    height: 80rpx;
    color: #fff;
    font-size: 36rpx;
    margin: 0 auto;
    background: #64B6A8;
    border-radius: 100rpx;
  }
  .none {
    background: #b4b4b4;
  }
</style>